<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数游戏</title>
    <script>
        var targetNumber = 0;
        var guessedNumber = '';
        window.onload = function() {
            initGuess();
        }

        function initGuess() {
            console.log('called');
            targetNumber = Math.round(Math.random()*100);
            console.log('系统生成数==>', targetNumber);
            // 清空之前遗留的输出
            var guessedNumber = '';
            document.getElementById('notice').innerText = "";
            document.getElementById('guessed').innerText = "";
        }

        function checkNumber() {
            var numberNode = document.getElementById('guessNumber');
            guessNumber = numberNode.value;

            // 清空输入框的值
            numberNode.value = '';

            console.log('输入的数==>',guessNumber);

            if(isNaN(guessNumber)) {
                alert('请输入一个有效的数字');
                return false;
            }

            if(guessNumber < targetNumber) {
                // 输出猜的数字小了
                document.getElementById('notice').innerText = "猜错了，数小了";
            } else if(guessNumber > targetNumber){
                // 输出猜的数字大了
                document.getElementById('notice').innerText = "猜错了，数大了";
            } else {
                // 恭喜你猜对了
                document.getElementById('notice').innerText = "恭喜你，猜对了";
            }
            // 添加已经猜测了的数字
            guessedNumber += guessNumber + ','
            document.getElementById('guessed').innerText = guessedNumber;
        }
    </script>
</head>
<body>
    <p>系统现在随机生成了一个1-100数字，请输入你觉得可能生成的数字</p>
    <input type="text" id="guessNumber" autocomplete="false" placeholder="请输入一个1-100的整数">
    <input type="button" value="提交" onclick="checkNumber()">
    <input type="button" value="再玩一次" onclick="initGuess()">
    <p id="notice"></p>
    <p>你已经猜过的数：<span id="guessed"></span></p>
</body>
</html>